@import config

::placeholder
	color: $colorPlaceholder

::selection
	background-color: $accent
	color: #fff

input, textarea
	outline: none
	&:focus:required:invalid
		border-color: red
	&:required:valid
		border-color: green

body
	font-size: 16px
	min-width: 320px
	position: relative
	line-height: 1.65
	font-family: 'Montserrat'
	overflow-x: hidden
	color: $text
	background-color: $colorBody

// Custom Sass / Remove before use

.container
	max-width: 1440px
	padding: 0 calc((1440px - 1275px) / 2)
	margin: 0 auto

header
	display: grid
	grid-template-rows: 38px 164px 50px
	margin-bottom: 40px
	.header_info-contact
		background-color: $text
		color: $colorBody
		a
			color: $colorBody
			text-decoration: none
		svg
			fill: $colorBody
			margin-right: 5px
		.container
			display: grid
			grid-template-columns: repeat(3, 1fr)
			height: 100%
			align-items: center
			a:hover
				color: $accent
			.header_contact-region
				display: flex
				height: 100%
				label
					height: 100%
					align-content: center
				select
					height: 100%
					background-color: transparent
					color: $colorBody
					appearance: none
					border: none
					text-align: center
					option
						background-color: $text
						color: $colorBody
			.header_contact-help,
			.header_contact-telefon
				display: flex
				height: 100%
				align-items: center
			.header_contact-help
				justify-content: center
			.header_contact-telefon
				justify-content: end
	.header_info-search
		a
			color: $text
		svg
			fill: $text
			margin-right: 5px
		.container
			height: 100%
			display: grid
			grid-template-columns: repeat(5, 1fr)
			align-items: center
			.info_search-search
				grid-column: span 3
				height: 100%
				display: inline-flex
				align-items: center
				justify-content: center
				input,
				button
					height: 30px
				#search_search-input
					width: 435px
					border: none
					font-size: 14px
					font-weight: 300
					padding-left: 10px
					letter-spacing: 1px
					background-color: hsla(0, 0, 77%, .10)
					border: 1px solid hsla(0, 0, 0, .10)
				#search_search-button
					width: 150px
					background-color: $accent
					border: none
					color: $colorWhite
					font-size: 14px
					font-weight: 400
			.info_search-account
				height: 100%
				display: flex
				align-items: center
				justify-content: center
			.info_search-cart
				height: 100%
				display: flex
				align-items: center
				justify-content: center
				.info_cart-count
					margin-left: 5px
					background-color: $accent
					color: $colorWhite
					font-size: 14px
					font-weight: 700
					padding: 1px 5px
					border-radius: 50%
	.header_nav
		background-color: $colorMenu
		height: 100%
		.container
			height: 100%
			display: flex
			flex: 1
			.header_nav-menu
				padding: 0
				margin: 0
				list-style: none
				li
					padding: 0
					margin: 0 -4px 0 0
					white-space: nowrap
					display: inline-block
				a
					display: block
					width: 225px
					color: $text
					text-transform: uppercase
					font-weight: 700
					padding: 12px 70px
					border-left: 1px solid $colorMenu
					&:hover
						color: $colorWhite
						background-color: $accent
						text-decoration: none
				.active a
					background-color: $accent
					color: $colorWhite

main
	display: grid
	grid-template-rows: 550px
	margin-bottom: 230px
	.main_info-slider
		.container
			display: grid
			grid-template-columns: minmax(auto, 1032px) minmax(auto, 243px)
			grid-template-rows: 460px
			.info_slider-img
				.info_slider-text
					position: relative
					&::before
						position: absolute
						content: ''
						top: 0
						right: 0
						bottom: 0
						left: 0
						background-color: $accent
						z-index: 1
						opacity: .62
					p
						position: absolute
						z-index: 1
						color: $colorWhite
						font-size: 100px
						font-weight: 700
						text-transform: uppercase
						line-height: 1.5
						margin-left: 30px
				#slider_img-inner
					img
						width: 100%
						height: auto
			.info_slider-box
				margin-left: 30px
				text-transform: uppercase
				font-size: 12px
				.slider_man
					font-size: 26px
					font-weight: 900
					margin-top: 30px
				a
					text-decoration: none
			.info_slider-female,
			.info_slider-man
				width: 212px
				height: 212px
				border: 1px solid $colorMenu
				background-repeat: no-repeat
				background-position: 50% 50%
				padding: 44px 15px
				&:hover
					border: 1px solid $accent
					transform: scale(1.1)
			.info_slider-man
				color: #8AB2FF
				background-image: url("../images/male.svg")
			.info_slider-female
				color: #FF93C7
				margin-top: 30px
				background-image: url("../images/female.svg")
	.main_product
		text-transform: uppercase
		.container
			display: grid
			grid-template-columns: 1fr
			grid-template-rows: auto auto
			.main_product-header
				h2
					font-size: 38px
					font-weight: 700
				p
					font-size: 20px
					font-weight: 300
			.main_product-card
				display: grid
				grid-template-columns: repeat(3, minmax(auto, 350px))
				grid-template-rows: repeat(2, 550px)
				grid-gap: 35px 113px
				.product_card-item:nth-child(5)
					grid-column: 2 / span 2
					grid-row: 2 / 3
					.img_title
						color: white
						position: absolute
						text-align: center
						font-size: 68px
						font-weight: 700
						top: 25%
						left: 15%
						span
							font-size: 35px
				.product_card-item:nth-child(4)
					.card_item-img
						background-color: #FF77bb
					.img_title
						position: absolute
						color: #FF77bb
						font-size: 60px
						font-weight: 700
						width: 170px
						height: 170px
						background-color: #fff
						border-radius: 50%
						display: flex
						align-items: center
						justify-content: center
						top: 25.5%
						left: 27%
				.product_card-item
					position: relative
					.card_item-title
						margin-top: 40px
						font-size: 26px
						font-weight: 700
						text-align: center
						a
							text-decoration: none
							color: $text
					.card_item-desc
						font-size: 14px
						font-weight: 300
						text-align: center
					.promo
						width: 155px
						position: absolute
						top: 0
						padding: 15px
						color: $colorWhite
						font-size: 12px
						font-weight: 400
						text-align: center
					.promo1
						background-color: #8AB2FF
					.promo2
						background-color: #FF77bb

footer
	background-color: $accent
	background-image: url("../images/footer_bg.svg")
	background-repeat: no-repeat
	background-position: 50% -1px
	color: $colorWhite
	.container
		padding-top: 150px
		display: grid
		grid-template-columns: 1fr
		grid-template-rows: repeat(2, auto)
		.footer_nav
			display: grid
			grid-template-columns: repeat(5, 1fr)
			text-transform: uppercase
			margin-top: 30px
			a
				color: $colorWhite
				text-decoration: none
			.footer_nav-title
				font-size: 20px
				font-weight: 700
				margin-bottom: 30px
			.footer_nav-item
				font-size: 16px
				font-weight: 400
				margin-bottom: 20px
			.footer_nav-subscribe
				grid-column: 4 / span 2
				.footer_nav-form
					display: inline-flex
					width: 100%
					margin-bottom: 90px
					margin-top: 20px
					input,
					button
						height: 30px
						color: $accent
					input
						border: none
						width: 70%
						padding: 0 10px
						&::placeholder
							color: $accent
					button
						width: 30%
						background-color: $colorWhite
						border: none
						border-left: 1px solid $accent
				.footer_nav-title:not(:last-child)
					margin-bottom: 10px
		.footer_copyright
			display: flex
			justify-content: center
			margin-top: 50px
			margin-bottom: 10px

#info_account-modal
	//width: 800px
	//height: 500px
	.modal_container
		display: grid
		grid-template-columns: repeat(2, 1fr)
		width: 800px
		height: 500px
		font-family: 'Montserrat'
		.account_modal-authorization
			display: grid
			grid-template-rows: 100px 300px
			align-items: center
			.account_modal-title
				font-size: 22px
				font-weight: 700
				text-transform: uppercase
				text-align: center
			.account_modal-form
				display: grid
				grid-template-rows: auto auto
				justify-items: center
				.modal_form-login
					display: grid
					justify-self: center
					input,
					button
						width: 300px
						height: 38px
						margin-bottom: 30px
					input
						border: 1px solid $accent
						padding: 0 15px
					button
						border: none
						background-color: $accent
						color: $colorWhite
						font-family: 'Montserrat'
				.modal_form-password
					margin-top: 30px
					button
						width: 300px
						height: 38px
						color: $accent
						background-color: transparent
						border: none
						&:hover
							background-color: $accent
							color: $colorWhite
		.account_modal-registration
			display: grid
			background-color: $accent
			justify-items: center
			.modal_reg-title
				margin-top: 30px
				font-size: 20px
				color: $colorWhite
			button
				background-color: none
				border: none
				color: $accent
				width: 250px
				height: 38px


// Страница личного кабинета (Ваши контактные данные)

main
	.container
		.LKmain_account
			display: grid
			grid-template-rows: repeat(2, auto)
			.LKmain_account-header
				display: grid
				grid-template-columns: 100px 1fr 1fr
				align-items: center
				margin-bottom: 30px
				.LKaccount_header-title
					font-size: 38px
					font-weight: 900
				.LKaccount_header-logout
					text-align: right
					a
						font-size: 20px
						color: $text
			.LKmain_account-nav
				display: grid
				grid-template-columns: repeat(auto-fill, 450px)
				margin-bottom: 30px
				a
					color: $text
					font-size: 20px
				.LKactive
					font-weight: 700
				//.LKaccount_nav-orders
				//	margin-left: 50px
		.LKmain_account-data
			display: grid
			grid-template-columns: repeat(auto-fill, 380px)
			.LKaccount_data-column
				display: grid
				color: lighten($text, 50%)
				align-items: end
				font-size: 16px
				.LKaccount_data-name
					display: flex
					height: 55px
					align-items: end
				span, a
					color: lighten($text, 20%)
				a
					text-decoration: underline
		.LKmain_account-orders
			margin-top: 30px
			table
				width: 100%
				td
					height: 55px
				tr:hover
					background-color: lighten($accent, 25%)

.lk-btn
	width: 150px
	height: 30px
	border: none
	color: $colorWhite

.btn-order
	margin-right: 30px
	background-color: $accent
	&:hover
		background-color: $colorWhite
		color: $accent

.btn-delivery
	background-color: #FFC700
	&:hover
		background-color: $colorWhite
		color: #FFC700

.btn-received
	background-color: #00E04C
	&:hover
		background-color: $colorWhite
		color: #00E04C

.btn-cancel
	background-color: #FF212E
	&:hover
		background-color: $colorWhite
		color: #FF212E




//.images-responsive
//	display: block
//	max-width: 100%
//	height: auto
//
//.parent // Lazy Load Placeholder Generator: https://webdesign-master.ru/services/lazy/
//	background-image: url()
